<script lang="ts" setup>
/**
 * Props
 * @title 提示内容
 *
 * @okText 确认按钮文字
 * 默认 确认
 *
 * @noText 取消按钮文字
 * 默认 取消
 *
 * Emits
 * @ok 点击确认时回调
 *
 * @no 点击取消时回调
 *
 * Slot 自定义提示内容区域
 */
import Button from '@C/Button.vue'
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

defineProps({
  title: {
    type: String,
    required: false,
    default: '',
  },
  okText: {
    type: String,
    required: false,
    default: '确认',
  },
  noText: {
    type: String,
    required: false,
    default: '取消',
  },
})
const emits = defineEmits(['ok', 'no'])

const flag = ref(false)
const OnOK = () => {
  if (!flag.value) {
    flag.value = true
    emits('ok')
  }
}
onShow(() => {
  flag.value = false
})
</script>

<template>
  <div class="prm-confirm">
    <div class="title">
      <slot>{{ title }}</slot>
    </div>
    <div class="btn_box">
      <Button class="btn1" color="#666666" type="text" width="300" @tap.stop="emits('no')">{{ noText }}</Button>
      <div class="line" />
      <Button class="btn2" type="text" width="300" @tap.stop="OnOK">{{ okText }}</Button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.prm-confirm {
  background: white;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 600rpx;
  min-height: 280rpx;
  .title {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.85);
    flex: 1 1;
    padding: 40rpx 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn_box {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #dedede;
    .btn1 {
      flex: 1 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .line {
      background: #dedede;
      width: 1rpx;
      height: 100%;
    }
    .btn2 {
      flex: 1 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>